今天是第十八天我們可以寫一個javascript專題網頁程式管理系統，大學畢業都需要專題，因此我們可以自己架設一個網頁去放各個科系的專題發表，以下是我的程式碼
我將示範如何實現前端的框架，並介紹簡單的登入系統和專題展示頁面。
project-management-system/
│
├── index.html // 首頁
├── login.html // 登入頁面
├── upload.html // 專題上傳頁面
├── projects.html // 專題瀏覽頁面
├── admin.html // 管理員頁面
│
├── css/
│ └── style.css // 網頁樣式
│
└── js/
└── script.js // JavaScript 行為
index.html - 首頁<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>專題管理系統</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<h1>大學專題管理系統</h1>
<nav>
<a href="login.html">登入</a>
<a href="projects.html">瀏覽專題</a>
</nav>
</header>
<main>
<h2>歡迎來到大學專題管理系統</h2>
<p>這裡展示各科系的專題發表，學生可以上傳專題，管理員可以審核與管理。</p>
</main>
</body>
</html>
login.html - 登入頁面<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登入 - 專題管理系統</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<h1>登入系統</h1>
</header>
<main>
<form id="loginForm">
<label for="username">使用者名稱:</label>
<input type="text" id="username" name="username" required>
<label for="password">密碼:</label>
<input type="password" id="password" name="password" required>
<button type="submit">登入</button>
</form>
</main>
<script src="js/script.js"></script>
</body>
</html>
upload.html - 專題上傳頁面<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>上傳專題 - 專題管理系統</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<h1>上傳專題</h1>
</header>
<main>
<form id="uploadForm">
<label for="title">專題名稱:</label>
<input type="text" id="title" name="title" required>
<label for="description">專題描述:</label>
<textarea id="description" name="description" required></textarea>
<label for="advisor">指導老師:</label>
<input type="text" id="advisor" name="advisor" required>
<label for="category">類別:</label>
<select id="category" name="category">
<option value="cs">電腦科學</option>
<option value="ee">電機工程</option>
<option value="me">機械工程</option>
<!-- 可以增加更多類別 -->
</select>
<label for="file">專題附件 (PDF, PPT):</label>
<input type="file" id="file" name="file" accept=".pdf,.ppt" required>
<button type="submit">上傳專題</button>
</form>
</main>
<script src="js/script.js"></script>
</body>
</html>
projects.html - 專題瀏覽頁面<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>專題瀏覽 - 專題管理系統</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<h1>專題瀏覽</h1>
</header>
<main>
<div id="projectsList">
<!-- 專題列表會由 JavaScript 動態插入 -->
</div>
</main>
<script src="js/script.js"></script>
</body>
</html>
admin.html - 管理員頁面<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>管理員系統 - 專題管理系統</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<h1>管理專題</h1>
</header>
<main>
<div id="adminPanel">
<!-- 管理員專用功能，如審核、刪除專題 -->
</div>
</main>
<script src="js/script.js"></script>
</body>
</html>
script.js - JavaScript 行為邏輯document.getElementById('loginForm').addEventListener('submit', function(event) {
event.preventDefault();
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
// 簡單模擬登入檢查
if (username === 'admin' && password === 'password') {
alert('登入成功，歡迎管理員！');
window.location.href = 'admin.html';
} else {
alert('登入成功，歡迎使用者！');
window.location.href = 'projects.html';
}
});
document.getElementById('uploadForm')?.addEventListener('submit', function(event) {
event.preventDefault();
const title = document.getElementById('title').value;
const description = document.getElementById('description').value;
const advisor = document.getElementById('advisor').value;
const category = document.getElementById('category').value;
const file = document.getElementById('file').files[0];
// 模擬上傳專題
console.log(`專題名稱: ${title}, 描述: ${description}, 指導老師: ${advisor}, 類別: ${category}, 附件: ${file.name}`);
alert('專題已成功上傳！');
});
window.onload = function() {
// 模擬動態顯示專題列表
const projectsList = document.getElementById('projectsList');
if (projectsList) {
const sampleProjects = [
{ title: '專題一', description: '這是第一個專題', advisor: '老師A', category: '電腦科學' },
{ title: '專題二', description: '這是第二個專題', advisor: '老師B', category: '電機工程' }
];
sampleProjects.forEach(project => {
const projectDiv = document.createElement('div');
projectDiv.className = 'project';
projectDiv.innerHTML = `<h3>${project.title}</h3><p>${project.description}</p><p>指導老師: ${project.advisor}</p><p>類別: ${project.category}</p>`;
projectsList.appendChild(projectDiv);
});
}
};
style.css - 基本樣式
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
header {
background-color: #4CAF50;
color: white;
text-align: center;
padding: 1rem;
}
nav a {
color: white;
margin: 0 1rem;
text-decoration: none;
}
main {
padding: 2rem;
}
form {
max-width: 400px;
margin: 0 auto;
}
label {
display: block;
margin-top: 10px;
}
input, textarea, select {
width: 100%;
padding: 10px;
margin-top: 5px;
}
button {
margin-top: 20px;
padding: 10px;
width: 100%;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
.project {
background-color: white;
padding: 1rem;
margin-bottom: 1rem;
border-radius: 8px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
接下來我會以解釋javascript程式碼部分為主
script.js 的部分代碼解釋document.getElementById('loginForm').addEventListener('submit', function(event) {
event.preventDefault();
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
// 簡單模擬登入檢查
if (username === 'admin' && password === 'password') {
alert('登入成功，歡迎管理員！');
window.location.href = 'admin.html';
} else {
alert('登入成功，歡迎使用者！');
window.location.href = 'projects.html';
}
});
document.getElementById('loginForm').addEventListener('submit', function(event) {...});這行程式碼是為 loginForm 表單元素添加一個 事件監聽器，該監聽器會在表單被提交（submit）時觸發。
document.getElementById('loginForm')：通過 id 找到表單 <form> 元素。addEventListener('submit', ...)：設置表單的提交事件監聽器，當表單被提交時，執行以下代碼塊。event.preventDefault();這行程式碼的作用是防止表單的默認行為，即當表單被提交時，通常會重新加載頁面或導向其他頁面。這裡我們不想讓頁面立即跳轉或刷新，而是由 JavaScript 來處理資料，因此調用 event.preventDefault() 阻止默認行為。
const username = document.getElementById('username').value;這行程式碼透過 document.getElementById('username') 獲取表單中 id 為 username 的輸入框，並使用 .value 來取得使用者輸入的值。同樣的操作在下一行也應用於密碼輸入框。
if (username === 'admin' && password === 'password') {
alert('登入成功，歡迎管理員！');
window.location.href = 'admin.html';
} else {
alert('登入成功，歡迎使用者！');
window.location.href = 'projects.html';
}
username 為 'admin' 且 password 為 'password'，則視為管理員登入，並顯示提示訊息 "登入成功，歡迎管理員！"，然後導向管理員頁面 admin.html。projects.html。這是非常簡單的模擬驗證，實際應用中需要後端配合來進行真正的登入認證。
document.getElementById('uploadForm')?.addEventListener('submit', function(event) {
event.preventDefault();
const title = document.getElementById('title').value;
const description = document.getElementById('description').value;
const advisor = document.getElementById('advisor').value;
const category = document.getElementById('category').value;
const file = document.getElementById('file').files[0];
// 模擬上傳專題
console.log(`專題名稱: ${title}, 描述: ${description}, 指導老師: ${advisor}, 類別: ${category}, 附件: ${file.name}`);
alert('專題已成功上傳！');
});
document.getElementById('uploadForm')?.addEventListener('submit', function(event) {...});這行程式碼的結構與登入表單類似，不過這裡針對的是 id 為 uploadForm 的表單。這裡的 ? 是可選鏈接運算符（optional chaining），它會在 uploadForm 存在的情況下執行後面的代碼，避免頁面中未找到該元素時出現錯誤。
const title = document.getElementById('title').value;
const description = document.getElementById('description').value;
const advisor = document.getElementById('advisor').value;
const category = document.getElementById('category').value;
const file = document.getElementById('file').files[0];
這幾行程式碼從表單中的各個輸入框取得對應的值：
title: 專題名稱description: 專題描述advisor: 指導老師category: 專題類別file: 上傳的專題檔案（例如 PDF 或 PPT）。這裡的 .files[0] 表示取得所選的第一個檔案，因為 input 元素可以選擇多個檔案，但此處只選取一個。console.log(`專題名稱: ${title}, 描述: ${description}, 指導老師: ${advisor}, 類別: ${category}, 附件: ${file.name}`);
alert('專題已成功上傳！');
這段程式碼僅僅是模擬上傳過程：
console.log(...) 會在瀏覽器的開發者工具中輸出專題的相關資訊，讓你確認表單資料是否正確。alert('專題已成功上傳！') 會顯示一個對話框，告知使用者上傳成功。實際應用中，你會把這些資料傳送到後端伺服器進行真正的儲存或處理。
window.onload = function() {
// 模擬動態顯示專題列表
const projectsList = document.getElementById('projectsList');
if (projectsList) {
const sampleProjects = [
{ title: '專題一', description: '這是第一個專題', advisor: '老師A', category: '電腦科學' },
{ title: '專題二', description: '這是第二個專題', advisor: '老師B', category: '電機工程' }
];
sampleProjects.forEach(project => {
const projectDiv = document.createElement('div');
projectDiv.className = 'project';
projectDiv.innerHTML = `<h3>${project.title}</h3><p>${project.description}</p><p>指導老師: ${project.advisor}</p><p>類別: ${project.category}</p>`;
projectsList.appendChild(projectDiv);
});
}
};
window.onload = function() {...}這段程式碼會在頁面載入完成後執行，確保 DOM 結構已經就緒，這樣就可以安全地操作網頁上的元素。
const projectsList = document.getElementById('projectsList');這行程式碼找到專題列表的 <div> 容器，該容器是用來顯示專題的。
const sampleProjects = [
{ title: '專題一', description: '這是第一個專題', advisor: '老師A', category: '電腦科學' },
{ title: '專題二', description: '這是第二個專題', advisor: '老師B', category: '電機工程' }
];
title: 專題名稱description: 專題描述advisor: 指導老師category: 專題的科系或分類sampleProjects.forEach(project => {
const projectDiv = document.createElement('div');
projectDiv.className = 'project';
projectDiv.innerHTML = `<h3>${project.title}</h3><p>${project.description}</p><p>指導老師: ${project.advisor}</p><p>類別: ${project.category}</p>`;
projectsList.appendChild(projectDiv);
});
這段程式碼會遍歷 sampleProjects 數組，對每個專題動態生成一個 div 元素，並將專題資料插入到 HTML 結構中。每個專題會顯示：
老師
最後，將生成的 div 加入到 projectsList 容器中，實現專題列表的動態顯示。
這個 JavaScript 文件的主要功能是處理表單提交、模擬登入驗證、專題上傳和專題列表的動態顯示。
iThome鐵人賽
看影片追技術